import React from 'react';
import { Table } from 'antd';
import './DeliveryDetail.css'
import {Alreadyfahuo,Fahuozhengchang} from '../../OrderList/OrderDetail/CanOperate/CanOperate'
import {inject,observer} from 'mobx-react'
import {withRouter} from 'react-router-dom'
import * as api from '../../../../utils/api'
import axios from '../../../../utils/http'
@inject('curOrder')
@observer
class Deliverydetail extends React.Component {
    constructor(){
        super()
        this.state={
            columns:[
                {
                  title: '商品名称',
                  dataIndex: 'goodName',
                  align: 'center',
                  render:(text,record,index)=>{
                      return(
                          <div>
                              {record.goods.goodsName}
                          </div>
                      )
                  }
                },
                {
                  title: '货号',
                  dataIndex: 'number',
                  align: 'center',
                  render:(text,record,index)=>{
                    return(
                        <div>
                            {record.comspec.number}
                        </div>
                    )
                }
                },
                {
                    title: '货品号',
                    dataIndex: 'goodsCode',
                    align: 'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {record.goods.goodsCode}
                            </div>
                        )
                    }
                },
                {
                  title: '发货数量',
                  dataIndex: 'invoiceSq',
                  align: 'center',
                  render:(text,record,index)=>{
                    return(
                        <div>
                            {record.invoiceSq}
                        </div>
                    )
                }
                },
            ],
            oprerateColumns:[
                  {
                    title: '操作者',
                    dataIndex: 'imOperator',
                    align: 'center',
                  },
                  {
                    title: '操作时间',
                    dataIndex: 'imOt',
                    align: 'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {new Date(record.imOt).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}
                            </div>
                        )
                    }
                  },
                  {
                    title: '订单状态',
                    dataIndex: 'imOrderstatus',
                    align: 'center',
                    render:(text,record,index)=>{
                        let curOrderState = record.ordoperStatu
                        switch(curOrderState){
                            case 0: curOrderState = '未确认';break;
                            default: curOrderState = '已确认';  
                        }
                        return(
                            <div>
                                {curOrderState}
                            </div>
                        )
                    }
                  },
                  {
                    title: '付款状态',
                    dataIndex: 'imPaymentstatus',
                    align: 'center',
                    render:(text,record,index)=>{
                        let curOrderState = record.imPaymentstatus
                        switch(curOrderState){
                            case 0: curOrderState = '未付款';break;
                            default: curOrderState = '已付款';
                        }
                        return(
                            <div>
                                {curOrderState}
                            </div>
                        )
                    }
                  },
                  {
                    title: '发货状态',
                    dataIndex: 'imShipmentsstatus',
                    align: 'center',
                    render:(text,record,index)=>{
                        let curOrderState = record.imShipmentsstatus
                        switch(curOrderState){
                            case 0: curOrderState = '未发货';break;
                            case 1: curOrderState = '发货中';break;
                            default: curOrderState = '已发货';
                        }
                        return(
                            <div>
                                {curOrderState}
                            </div>
                        )
                    }
                  },
                  {
                    title: '备注',
                    dataIndex: 'imRemarks',
                    align: 'center',
                  },
            ],
            // 操作表的Data  进入该页面时会向后台发起请求
            operateData:[
                {
                    key:0,
                    operateId:0,
                    operatePeople:'admin',
                    operateTime:new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    orderState:'已确认',
                    payState:'已付款',
                    fahuoState:'已发货',
                    operateMessage:''
                }
            ],
            data:[{
                comspec:{},
                goods:{},
                memLocations:{}
            }],
            goodDataArr:[],
            faHuoDanZhuangTaiNum:'',//当前发货单号
            operateMsg:'',//操作备注
        }
    }
    //请求当前页面的信息
   async componentDidMount(){
        // 获取mobx或本地存储的订单ID
        // 通过订单ID向后台请求当前订单详情
       await this.getFaHuoDanAxios()
       await this.getFaHuoOperateAxios()
        // 根据goodID向后台发起请求当前商品的信息
    }
    getFaHuoDanAxios = ()=>{
        axios({
            url: api.QUERYINVOICEDetails,
            method:'GET',
            params:{
                invoiceId:this.props.curOrder.curFaHuoDanId
            }
        }).then(data=>{
            console.log(data)
            let dataArr = data.data.data
            let faHuoDanZhuangTaiNum = dataArr[0].invoiceIn
            let goodDataArr = []
            let goodData = dataArr.map(item=>{
                return item.goods
            })
            let comspecData = dataArr.map(item=>{
                return item.comspec
            })
            let curObj = {}
            curObj.goods = goodData[0]
            curObj.comspec = comspecData[0]
            curObj.invoiceSq = dataArr[0].invoiceSq
            curObj.key = 1
            goodDataArr.push(curObj)

            this.props.curOrder.saveCurFaHuoData(dataArr)
            this.setState({
                data:dataArr,
                faHuoDanZhuangTaiNum,
                goodDataArr
            })
        })
    }
    getFaHuoOperateAxios = ()=>{
        axios({
            url:api.DELIVERYOPERATIONINFO,
            method:'GET',
            params:{
                invoiceId:this.props.curOrder.curFaHuoDanId
            }
        }).then(data=>{
            console.log(data)
            let dataArr = data.data.data
            dataArr = dataArr.map((item,i)=>{
                item.key = i+1
                return item
            })
            console.log(dataArr)
            this.props.curOrder.saveCurFaHuoOperateData(dataArr)
            this.setState({
                operateData:dataArr
            })
        })
    }
    changeZongHeState = (obj)=>{
        console.log(obj)
        let curOrderData = {...this.state.curOrder}
        curOrderData.orderStateZongHe = obj
        this.setState({
            curOrder:curOrderData
        })

        /*向后台发起请求 修改订单综合状态*/
        // 刷新订单详情页面

    }
    ChangefaHuoState = (val,kuaiDiDanHao)=>{
        // 修改当前的发货单状态值
        let curOrderData = {...this.state.curOrder}
        curOrderData.faHuoState = val
        curOrderData.kuaiDiDanHao = kuaiDiDanHao
        this.setState({
            curOrder:curOrderData
        })

        // 向后台发起请求  修改当前发货单的状态和快递单号

    }
    changeFaHuoNum = (e)=>{
        this.setState({
            faHuoDanZhuangTaiNum:e.target.value
        })
    }
    operateMsgCahnge = (e)=>{
        this.setState({
            operateMsg:e.target.value
        })
    }
    render(){
        return (
            <div className='orderDetailBoxClass fahuodanDetailBoxClass'>
                <h1>发货单详情</h1>
                <button type="button" className="copyBtn" onClick={()=>{ let val=false; this.props.curOrder.chnageFromOrderToFaHuoDan(val);this.props.history.push('/Home/dingDan/Deliverylist')}}>返回发货单列表</button>
                <div className="orderClass">
                    <h3>基本信息</h3>
                    <div>
                        <ul>
                            <li>发货单流水号 : {this.state.data[0].invoiceSernum}</li>
                            <li>订单编号 : {this.state.data[0].invoiceOrdercode}</li>
                            <li>购买用户 : {this.state.data[0].invoiceBu}</li>
                            <li>发货时间 : {new Date(this.state.data[0].invoiceDt).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}</li>
                            <li>下单时间 : {new Date(this.state.data[0].invoiceOrdertime).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}</li>
                            <li>配送方式 : {this.state.data[0].invoiceDm}</li>
                            <li>配送费用 : {parseFloat(this.state.data[0].invoiceDc).toFixed(2)}</li>
                            <li>发货单号 : <label>{this.state.data[0].invoiceStatus ===0  ? (<input type="text" value={this.state.faHuoDanZhuangTaiNum} onChange={this.changeFaHuoNum}/>) : (<input type="text" value={this.state.faHuoDanZhuangTaiNum} onChange={this.changeFaHuoNum} disabled/>)}</label></li>
                        </ul>
                    </div>
                    <h3>客户留言</h3>
                    <div>{this.state.data[0].invoiceCm}</div>
                    <h3>收货人信息</h3>
                    <div>
                        <ul>
                            <li>姓名 : {this.state.data[0].memLocations.memName}</li>
                            <li>手机 : {this.state.data[0].memLocations.memNum}</li>
                            <li>地址 : {this.state.data[0].memLocations.memLocation} </li>
                        </ul>
                    </div>
                    <h3>商品信息</h3>
                    <div>
                        <Table columns={this.state.columns} dataSource={this.state.goodDataArr} pagination={false}/>
                    </div>
                    <h3>发货操作信息</h3>
                    {
                        this.state.data[0].invoiceStatus !== 1 ?
                        <div className="peratePage">
                            操作备注：<textarea name="" id="" cols="80" rows="3" onChange={this.operateMsgCahnge}></textarea>
                        </div>
                        :''
                    }
                    <div className="operateBox">
                        {/* 不同的订单状态会显示不同的可执行操作组件 */}
                        {this.state.data[0].invoiceStatus === 2 && (<Alreadyfahuo onChangefaHuoState={this.ChangefaHuoState} faHuoStateMsg={this.state.faHuoDanZhuangTaiNum} operateMessage={this.state.operateMsg}/>)}
                        {this.state.data[0].invoiceStatus === 0 && (<Fahuozhengchang onChangefaHuoState={this.ChangefaHuoState} faHuoStateMsg={this.state.faHuoDanZhuangTaiNum} operateMessage={this.state.operateMsg}/>)}
                    </div>
                    <div>
                        <Table columns={this.state.oprerateColumns} dataSource={this.state.operateData} pagination={false}/>
                    </div>
                </div>

                <div className='scrollbar'></div>
            </div>
        );
    }
}
export default withRouter(Deliverydetail);